import React from 'react';
import { Drawer,Empty,Popconfirm,Popover } from 'antd';
import './index.less'
import {PubSub} from 'pubsub-js'
import {CloseCircleOutlined} from '@ant-design/icons'
import {getMyOrder,delOrder} from "../../../../network/order";
import Notice from "../../../Notice";
function Profile(){
    const [visible,setVisible] = React.useState(false)
    const [orderInfo,setOrderInfo] = React.useState([])
    async function getOrderData(){
        let result = await getMyOrder(`${sessionStorage.getItem('userId')}`)
        if(result.code === 200 || result.code === 201){
            setOrderInfo(result.data)
        }
    }
    React.useEffect( () => {
        let token = PubSub.subscribe('showPro',async (_,data) => {
            await getOrderData()
            setVisible(data)
        })
        return () => {
            PubSub.unsubscribe(token);
        }
    },[])
    function onClose(){
        setVisible(false)
    }
    function delMyOrder(orid){
        return async () => {
            let result = await delOrder(orid)
            if(result.code === 200){
                await getOrderData()
                Notice('success','删除订单成功')
            }else{
                Notice('error','删除订单失败')
            }
        }
    }
    function showList(arr){
        return (
            <div className='orderShowList'>
                {
                    arr.map(item => {
                        return (
                            <div key={`${item.gname}${item.gcolor}`} style={{display: 'flex',marginBottom: '10px'}}>
                                <div style={{marginRight: '10px'}}>
                                    <img src={item.gimg} alt="" style={{width: '66px',height: '66px'}}/>
                                </div>
                                <div style={{textAlign: 'right'}}>
                                    <div>{item.gname}</div>
                                    <div>{item.gcolor}</div>
                                    <div>X{item.gcount}</div>
                                </div>
                            </div>
                        )
                    })
                }
            </div>
        )
    }
    return (
        <Drawer
            zIndex={100}
            title="我的订单"
            placement="right"
            closable={false}
            onClose={onClose}
            visible={visible}
            width={400}>
            {
                orderInfo.length === 0 ? (
                    <Empty description={'暂无数据'} />
                ) :
                    (<div className='orderDetail'>
                        {
                            orderInfo.map(item => {
                                return (
                                    <div key={item.orid} className='orderDetailItem'>
                                        <div className='delOrder'>
                                            <span>
                                                订单编号#{item.orid}
                                            </span>
                                            <Popconfirm
                                                placement='bottomRight'
                                                title='确认删除此订单？'
                                                onConfirm={delMyOrder(item.orid)}>
                                                <span>
                                                    <CloseCircleOutlined/>
                                                </span>
                                            </Popconfirm>
                                        </div>
                                        <div className='whoOrder'>收件人 - {item.usernickname}</div>
                                        <div className='addrOrder'>收货地址 - {item.addr}</div>
                                        <div className='orderGoods'>
                                            <Popover placement='left' title='商品清单' content={showList(item.goodsList)} trigger='click'>
                                                <span style={{color: '#5079D9',cursor: 'pointer'}}>商品详情...</span>
                                            </Popover>
                                        </div>
                                        <div className='orderCash'>订单金额 - ￥{item.totalprice}</div>
                                    </div>
                                )
                            })
                        }
                    </div>)
            }
        </Drawer>
    )
}

export default Profile